<template>
    <div class="weather-app">
        <!-- 页面头部，显示城市名称 -->
        <div class="header">
            <h1>{{ city }}</h1>
        </div>
        <!-- 天气信息主体部分 -->
        <div class="weather-content">
            <!-- 天气图标展示 -->
            <img :src="weatherIcon" alt="Weather Icon" class="weather-icon">
            <!-- 温度展示 -->
            <div class="temperature">{{ temperature }}°C</div>
            <!-- 天气状况描述展示 -->
            <div class="description">{{ description }}</div>
            <!-- 空气质量展示 -->
            <div class="air-quality">
                <span>空气质量：</span>
                <span>{{ airQuality }}</span>
            </div>
        </div>
        <!-- 刷新按钮 -->
        <button @click="fetchWeatherData" class="refresh-button">刷新天气</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式数据，存储城市名称，初始化为默认城市（可根据需求修改）
const city = ref('西安');
// 温度数据
const temperature = ref('');
// 天气状况描述数据
const description = ref('');
// 天气图标路径，需根据不同天气状况对应不同图标（这里只是示例，可完善对应逻辑）
const weatherIcon = ref('');
// 空气质量数据
const airQuality = ref('');

// 模拟获取天气数据的函数，实际中应替换为调用真实天气API的逻辑
const fetchWeatherData = async () => {
    // 模拟网络请求延迟，可根据实际情况调整
    await new Promise(resolve => setTimeout(resolve, 1000));
    // 模拟不同城市的天气数据，实际需从API获取真实数据并解析赋值
    if (city.value === '北京') {
        temperature.value = 20;
        description.value = '晴';
        weatherIcon.value = '/static/icon/666.jpg'; // 替换为真实图标路径
        airQuality.value = '良';
    } else if (city.value === '上海') {
        temperature.value = 18;
        description.value = '多云';
        weatherIcon.value = 'path/to/cloudy-icon.png';
        airQuality.value = '轻度污染';
    }
    // 可以添加更多城市的模拟数据以及错误处理逻辑等
};

// 页面加载时自动获取一次天气数据
fetchWeatherData();
</script>

<style>
.weather-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.header {
    margin-bottom: 20px;
}

h1 {
    font-size: 28px;
    color: #333;
}

.weather-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

.weather-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 10px;
}

.temperature {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.description {
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
}

.air-quality {
    font-size: 16px;
    color: #999;
}

.refresh-button {
    padding: 10px 20px;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
</style>
